<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item label="商户code：">
            <el-input v-model="filters.thirdMerchantCode" placeholder="输入商户code " clearable></el-input>
          </el-form-item>
          <el-form-item label="商户名称：">
            <el-input v-model="filters.name" placeholder="输入商户名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="审核状态：" prop="status">
            <el-select v-model="filters.status" placeholder="全部">
              <el-option value="1">待提交</el-option>
              <el-option value="2">待审核</el-option>
              <el-option value="3">审核通过</el-option>
              <el-option value="4">审核不通过</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="营业状态：" prop="businessStatus">
            <el-select v-model="filters.businessStatus" placeholder="全部">
              <el-option value="1">待营业</el-option>
              <el-option value="2">营业中</el-option>
              <el-option value="3">清退中</el-option>
              <el-option value="4">已清退</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户状态：" prop="merchantStatus">
            <el-select v-model="filters.merchantStatus" placeholder="全部">
              <el-option value="1">启用</el-option>
              <el-option value="2">停用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="creatorName" label="创建人">
            <el-input v-model="filters.creatorName" placeholder="输入联系人名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建时间：" prop="creatorDate">
            <el-date-picker v-model="filters.creatorDate"  type="daterange" range-separator="~" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item prop="contactName" label="联系人">
            <el-input v-model="filters.contactName" placeholder="联系人" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系人手机：">
            <el-input v-model="filters.contactMobile" placeholder="联系人手机" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button label="查询" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button label="重置" type="primary" @click="resetForm('filters')"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="batchSubmitReview">批量提交审核</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="batchMerchantReview">批量审核</el-button>
          </el-form-item>
        </el-row>
        <table-column-filter-dialog
          ref="tableColumnFilterDialog"
          :columns="columns"
          @handleFilterColumns="handleFilterColumns"
        ></table-column-filter-dialog>
      </el-form>
    </div>
    <!--表格内容栏-->
    <div class="tab-container">
      <!-- tbs标签 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key" :value="item.value"></el-tab-pane>
      </el-tabs>
      <!-- jic table表格-->
      <div class="toolbar" >
        <!--表格显示列界面-->
        <table-column-filter-dialog
          ref="tableColumnFilterDialog"
          :columns="columns"
          @handleFilterColumns="handleFilterColumns"
        ></table-column-filter-dialog>
      </div>
      <!--表格内容栏-->
      <jic-table
        ref="JicTable"
        :data="pageResult"
        :operationWidth="390"
        :totalSize="totalSize"
        :columns="filterColumns"
        :showCopyDataOperation="true"
        :showCopyLinkOperation="false"
        :showDetailOperation="true"
        :showBatchDelete="false"
        :loading="loading"
        :btnList="btnList"
        :statusype="statusype"
        @findPage="findPage"
        @handleEdit="handleEdit"
        @handleDetail="handleDetail"
        @submitReview="submitReview"
        @merchantReviewView="merchantReviewView"
        @revokeReview="revokeReview"
        @businessStatusEdit="businessStatusEdit"
        ></jic-table>
    </div>
    <!-- 审核弹窗 -->
    <el-dialog class="el-dialog-style" title="审核" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="verifyForm" ref="verifyForm">
          <el-form-item label="审核结果：" label-width="125px" prop="managerStatus">
            <el-radio-group v-model="verifyForm.managerStatus">
              <el-radio :label="3">审核通过</el-radio>
              <el-radio :label="4">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核不通过原因：" label-width="125px" prop="reviewReason">
              <el-input :rows="4" clearable v-model="verifyForm.reviewReason" autocomplete="off" maxlength="200" type="textarea" style="min-height: 33px; max-width: 75%; "></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="dialogFormVisible = false" size="mini" class="cancelButton">取消</el-button>
            <el-button type="primary" @click="merchantReview()" size="mini" class="searchButton">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>

import merchantRequest from "@/request/merchantRequest";
import JicTable from "./MerchantTbale";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";

export default {
  components: {
    merchantRequest,
    JicTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    var validateReviewReason = (rule, value, callback) => {
      if(this.verifyForm.status == 4){
        if (value == '' || value == null) {
          callback(new Error('审核不通过时原因不能为空'));
        } else {
          callback();
        }
      }
    };
    return {
      tabMapOptions: [
        { label: "全部", key: "0" },
        { label: "待提交 2", key: "1" },
        { label: "待审核 0", key: "2" },
        { label: "审核通过 3", key: "3" },
        { label: "审核不通过 0", key: "4" },
        { label: "待营业", key: "5" },
        { label: "营业中", key: "6" },
        { label: "清退中", key: "7" },
        { label: "已清退", key: "8" },
      ],
      activeName: "0",
      
      statusype:true,
      //列表按钮
      btnList: [{
          "customLabel": "查看",
          "isShowMethod": "1,2,3,4",
          "method": "handleDetail",
          "perms": "sys:role:add"
      },{
          "customLabel": "编辑",
          "isShowMethod": "1,4",
          "method": "handleEdit",
          "perms": "sys:role:add"
      }, {
          "customLabel": "提交审核",
          "isShowMethod": "1,4",
          "method": "submitReview",
          "perms": "sys:role:add"
      }, {
          "customLabel": "撤销提交",
          "isShowMethod": "2",
          "method": "revokeReview",
          "perms": "sys:role:add"
      }, {
          "customLabel": "审核",
          "isShowMethod": "2",
          "method": "merchantReviewView",
          "perms": "sys:role:add"
      }],
      
      totalSize:0,
      
      loading:true,
      content: "",
      size: "small",
      filters: {
        status: '0',
        orgNumber:"",
        name:"",
        creatorDate:[],
        contactName:"",
        contactMobile:"",
        creatorName:"",
      },
      columns: [
        { prop: "orgNumber", label: "商户编号", minWidth: 90 },
        { prop: "name", label: "商户名称", minWidth: 120 },
        { prop: "merchantCode", label: "商户code", minWidth: 120 },
        { prop: "merchantType", label: "商户类型", minWidth: 120, formatter: this.typeFormatter },
        { prop: "managerStatus", label: "审核状态", minWidth: 120, formatter: this.statusFormatter},
        { prop: "businessStatus", label: "营业状态", minWidth: 120, formatter: this.businessStatusFormatter},
        { prop: "merchantStatus", label: "商户状态", minWidth: 120, formatter: this.merchantStatusFormatter},
        { prop: "contactName", label: "联系人", minWidth: 120 },
        { prop: "contactMobile", label: "联系人手机", minWidth: 120 },
        { prop: "settledTime", label: "入驻时间", minWidth: 120 },
        { prop: "creatorName", label: "创建人", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      dialogFormVisible: false,
      verifyForm:{
        reviewReason:"",
        managerStatus:null
      },
      selections: [],
    };
  },
  
  watch: {
    activeName(val) {
      if(val != '0'){
        this.filters.status = val;
        this.filters.businessStatus = null;
      }else{
        this.filters.status = null;
        this.filters.businessStatus = null;
      }
      this.findPage();
    }

  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }
      let that = this;
      if (that.filters == undefined || that.filters == null) {
        that.filters = {};
      }
      if(that.filters.creatorDate.length!=0){
        that.filters.createTimeS = that.filters.creatorDate[0];
        that.filters.createTimeE = that.filters.creatorDate[1];
      }
      that.filters.statusType = 3;
      if(that.filters.status == 5){
        that.filters.managerStatus = "";
        that.filters.businessStatus = 1;
      }else if(that.filters.status == 6){
        that.filters.managerStatus = "";
        that.filters.businessStatus = 2;
      }else if(that.filters.status == 7){
        that.filters.managerStatus = "";
        that.filters.businessStatus = 3;
      }else if(that.filters.status == 8){
        that.filters.managerStatus = "";
        that.filters.businessStatus = 4;
      }else{
        that.filters.managerStatus = that.filters.status == 0 ? "" : that.filters.status;
      }
      that.filters.start = this.pageRequest.pageNum;
      that.filters.limit = this.pageRequest.pageSize;
      merchantRequest.queryMerchantList(that.filters, function(res) {
        if (res.data == null) {
          that.loading = false;
          res.data = [];
          res.totle = 0;
        } else {
          that.loading = false;
          that.$refs.JicTable.findPage({content: res.data.rows, total: res.data.total});
        }
      });
    },
    //提交审核按钮
    submitReview(data){
      let that = this; 
      //判断状态是否为待提交
      if(data.row.managerStatus != 1 && data.row.managerStatus != 4){
        // 只能审核状态为【待审核】的用户
        that.$message({ message: "当前状态不可操作",   type: "warning"});
        return false;
      }
      
      this.$confirm("确定要提交审核？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        merchantRequest.submitReview(data.row, res=>{
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.findPage();
          }else if(res.code == "9999") {
            that.$message({ message: res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
    },
    //批量提交审核
    batchSubmitReview(){
      let selections = this.$refs.JicTable.selections;
      if(selections.length==0){
        this.$message({ message: "请选择要操作的数据",   type: "warning"});
        return false;
      }
      let that = this; 
      //判断状态是否为待提交
      for(var i =0; i < selections.length; i++){
        if(selections[i].managerStatus != 1 && selections[i].managerStatus != 4){
          that.$message({ message: "当前数据勾选状态有误",   type: "warning"});
          return false;
        }
      }
      this.$confirm("确定要批量提交审核？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        merchantRequest.batchSubmitReview({statusType:3,"requestList":selections} , res => {
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.findPage();
          }else if(res.code == "9999") {
            that.$message({ message:res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
    },
    //撤销提交
    revokeReview(data){
      let that = this; 
      //判断状态是否为待提交
      if(data.row.managerStatus != 2){
        that.$message({ message: "当前状态不可操作",   type: "warning"});
        return false;
      }
      this.$confirm("确定撤销提交？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        merchantRequest.revokeReview(data.row, res=>{
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.findPage();
          }else if(res.code == "9999") {
            that.$message({ message: res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
    },
    //商户审核弹窗
    merchantReviewView(data){
      //默认通过
      this.$nextTick(() => {
        this.verifyForm.managerStatus = 3;
        this.verifyForm.id = data.row.id;
        this.verifyForm.reviewReason = '';
        this.verifyForm.type = false;//是否为批量
        this.dialogFormVisible = true;
      });
    },
    //审核商户
    merchantReview(){
      let that = this;
      that.verifyForm.statusType = 3;
      this.$confirm("确定提交审核？", "提示", {
        type: "warning",
        closeOnClickModal: false,
        cancelButtonText: '取 消',
        confirmButtonText: '继 续',
      }).then(() => {
        if(that.verifyForm.type){
          merchantRequest.batchMerchantReview(this.verifyForm, res=>{
            if(res.code == "0000"){
              that.$message({ message: "操作成功",   type: "success"});
              that.findPage();
              that.dialogFormVisible = false;
            }else if(res.code == "9999") {
              that.$message({ message:  res.msg,   type: "error"});
            }
          });
        }else {
          merchantRequest.merchantReview(this.verifyForm, res=>{
            if(res.code == "0000"){
              that.$message({ message: "操作成功",   type: "success"});
              that.findPage();
              that.dialogFormVisible = false;
            }else if(res.code == "9999") {
              that.$message({ message:  res.msg,   type: "error"});
            }
          });
        }
      }).catch(() => {});
    },
    //批量审核商户
    batchMerchantReview(){
       //默认通过
      this.$nextTick(() => {
        let selections = this.$refs.JicTable.selections;
        if(selections.length==0){
          this.$message({ message: "请选择要操作的数据",   type: "warning"});
          return false;
        }
        let that = this; 
        //判断状态是否为待提交
        for(var i =0; i < selections.length; i++){
          if(selections[i].managerStatus != 2){
            that.$message({ message: "当前数据勾选状态有误",   type: "warning"});
            return false;
          }
        }
        this.verifyForm.managerStatus = 3;
        this.verifyForm.requestList = selections;
        this.verifyForm.reviewReason = '';
        this.verifyForm.type = true;//是否为批量
        this.dialogFormVisible = true;
      });
    },
    //商户类型转化
    typeFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "自营";
      } else if (cellValue == 2) {
        return "第三方商户";
      }
    },
    //审核状态转化
    statusFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1 ) {
        return "待提交";
      } else if (cellValue == 2) {
        return "待审核";
      } else if (cellValue == 3) {
        return "审核通过";
      } else if (cellValue == 4) {
        return "审核不通过";
      }
    },
    //
    businessStatusFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1 ) {
        return "待营业";
      } else if (cellValue == 2 ) {
        return "营业中";
      } else if (cellValue == 3 ) {
        return "清退中";
      } else if (cellValue == 4 ) {
        return "已清退";
      } 
    },
    //商户状态转化
    merchantStatusFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1 ) {
        return "启用";
      } else if (cellValue == 2 ) {
        return "停用";
      }
    },
    //获取选择框数据
    selectionChange(val) {
      this.selections = val.selections;
    },
    // 编辑页面
    handleEdit: function(data) {
      this.$router.push({
        path:
          "/MerchantBasicInfo/" + data.row.id + "/1/" + 0
      });
    },
    businessStatusEdit:function(data){
      this.$router.push({
        path:
          "/MerchantEditPage/" + data.row.id + "/1/" + 0
      });
    },
    // 详情页面
    handleDetail: function(data) {
      this.$router.push({
        path:
          "/MerchantBasicInfo/" + data.row.id + "/1/" + 1
      });
      // this.$router.push({path:"/MerchantEditPage",query:{cid:data.row.id,storeid:data.row.storeId,isShow:1}});
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters = {
          status: '0',
          businessStatus: '',
          orgNumber:"",
          name:"",
          creatorDate:[],
          contactName:"",
          contactMobile:"",
          creatorName:"",
        };
        this.findPage(null);
      }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
  },
  mounted() {
    this.initColumns();
    this.findPage();
  }
};
</script>

<style lang="scss" scoped>
</style>
